<template>
  <div class="center_archives">
    <Card class="box-card">
      <div slot="header" class="clearfix">
        <span>文章列表</span>
        <transition name="fade">
          <div v-if="artIsShow">
            <mavon-editor v-model="articleDataForStr" class="mavon_editor" />
            <Row class="btnGroup">
              <Input v-model="title" placeholder="请输入标题"></Input>
              <Input v-model="tagName" placeholder="请输入标签"></Input>
              <Input v-model="cgyName" placeholder="请输入分类"></Input>
              <Button type="primary" @click="artIsShow = ! artIsShow">退出</Button>
              <Button type="success" @click="postArticle">发布</Button>
            </Row>
          </div>
        </transition>
        <Button
          style="float: right; padding: 10px 20px; position: relative;bottom: 12px;"
          type="success"
          @click="postArticle"
          v-if="$store.state.isLogin"
        >发布</Button>
      </div>
      <div class="article_item">
        <div class="article_overside" v-for="(item, index) in ArticleList"
          :key="index">
        <div
          class="article_list"
          ref="trfm"
          @mouseover="trFm(1, index)"
          @mouseout="trFm(0, index)"
          :class="top_img_h"
          @click="showArticleView(item._id, index)"
        >
          <div
            class="img_art"
            :style="`background-image:url('${item.img?item.img:'https://glack.net/img/blog/art_imgs/6.jpg'}')`"
          >
            <div class="content">
              <div class="title">{{item.title}}</div>
            </div>
          </div>
          <div class="cont" v-if="item.cont">{{item.cont}}</div>
          <!-- <div class="cont">haah哈哈我是是是是是十分haah哈哈我是是是是是十分haah哈哈我是是是是是十分haah哈哈我是是是是是十分haah哈哈我是是是是是十分</div> -->
        </div>
        </div>
      </div>
    </Card>
    <!-- https://glack.net/img/blog/art_imgs/0.jpg -->
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Button, Link, Card, Input, Row } from "element-ui";
import { getArticlesFun } from "@/api/api";
import myImage from '../../common/myImage'

export default {
  inject: ["reload"],
  data() {
    return {
      artIsShow: false,
      articleDataForStr: "",
      tagName: "",
      cgyName: "",
      title: "",
      htmlMarked: "",
      ArticleList: [],
      top_img_h: ''
    };
  },
  methods: {
    postArt() {
      this.$http
        .post("/users/api/updateArticle", {
          tagName: this.tagName,
          cgyName: this.cgyName,
          title: this.title,
          articleDataForStr: this.articleDataForStr
        })
        .then(res => {
          this.$message({
            type: "success",
            message: "发表成功"
          });
          this.artIsShow = false;
          this.reload();
        });
      // .catch(err => {
      //   console.log(err)
      // })
    },
    postArticle(){
      this.$router.push("/postArticle")
    },

    // 初始化文章列表
    async __initArticles() {
      var marked = require("marked");
      this.htmlMarked = marked("I am using __markdown__.");
      // this.$store.dispatch("getArticleList");
      const res = await getArticlesFun();
      if (res.data.code === 1) {
        this.ArticleList = res.data.data;
      } else {
        this.$message.warning(res.data.msg);
      }
    },

    showArticleView(id, index) {
      this.$router.push({
        path: "/article/" + id
      });
    },
    trFm(i, index) {
      if (i) {
        this.$refs.trfm[index].style = `
          transform: scale(1.1);
          transition: transform 0.5s ease-in;
        `
      } else {
        this.$refs.trfm[index].style = `
          transform: scale(1);
          transition: transform 0.5s ease-out;
        `
      }
    },
  },
  mounted() {
    this.__initArticles();
  },
  computed: {
    // ...mapState(["ArticleList"])
  },
  components: {
    Button,
    Link,
    Card,
    Input,
    Row,
    myImage
  }
};
</script>

<style lang="scss">
.center_archives {
  .clearfix {
    .mavon_editor {
      position: absolute;
      width: 100%;
      height: 80%;
      left: 0;
      top: 0;
    }
    .btnGroup {
      position: absolute;
      top: 85%;
      display: flex;
      justify-content: space-between;
      left: 15%;
      z-index: 2;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.6);
    }
  }

  .article_item {
    display: flex;
    flex-wrap: wrap;
    .top_img_h {
      transform: scale(1.1);
      transition: transform 0.5s ease-in;
    }
    .top_img_o {
      transform: scale(1);
      transition: transform 0.5s ease-out;
    }
    .article_overside{
      width: 80%;
      height: 300px;
      overflow: hidden;
      margin: 20px auto;
      cursor: pointer;
      border-radius: 5px;
    }
    .article_list {
      width: 100%;
      height: 100%;
      .img_art {
        width: 100%;
        height: 300px;
        background-repeat: no-repeat;
        background-size: cover;
        color: #d1bfb7;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .content {
        .title {
          font-size: 22px;
          color: #fff;
        }
      }
      .cont {
        font-size: 12px;
        color: #bbb;
        text-align: left;
        background-color: rgba(0, 0, 0, 0.4);
        transform: translateY(-31px);
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
  }
}
@media (max-width: 768px) {
  .article_overside{
    width: 100% !important;
    margin: 20px 0 !important;
  }
  .el-card__body{
    padding: 20px 0 !important;
  }
}
</style>
